<template>
  <view class="equipment">
    <view class="equipment-content">
      <view class="steer" @click="goSiteDeviceDetails">
        <image src="/static/common/arrow-left-circle-line.png" mode="" />
      </view>
      <view class="tab-list">
        <up-tabs
          :list="tabList"
          @click="handleTab"
          :activeStyle="{
            color: '#fff',
            'font-size': '32rpx',
          }"
          :inactiveStyle="{
            'font-family': 'Alibaba PuHuiTi 3',
            'font-size': '32rpx',
            color: '#bfbfbf',
            'text-align': 'center',
          }"
        ></up-tabs>
      </view>
      <template v-if="activeTab == 1 && dataListSummaryDataBMS">
        <!-- 运行状态 -->
        <view class="operationalStatus">
          <image
            class="operationalStatus-img"
            src="/static/operationalStatus.png"
            mode=""
          />
          <view class="content-description">
            <view class="content-type">
              {{ t("equipmentDetail.operationalStatus") }}
            </view>
            <view class="content-value">{{
              dataListSummaryDataBMS.batteryPackStatus
            }}</view>
          </view>
        </view>
        <!-- 运行item -->
        <view class="flex-list-content">
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/voltage.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataBMS.batteryPackVoltage }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.totalBatteryPackVoltage") }}</view
              >
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/current.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataBMS.batteryPackElec }}</text>
                <text class="unit">A</text>
              </view>
              <view class="content-value">{{
                t("equipmentDetail.totalBatteryPackCurrent")
              }}</view>
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/totalSoc.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataBMS.batteryPackSOH }}</text>
                <text class="unit">%</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.totalSocOfTheBatteryPack") }}
              </view>
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/batteryPower.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>
                  {{ powerUnit(dataListSummaryDataBMS.batteryPackPower, 0) }}
                </text>
                <text class="unit">
                  {{ powerUnit(dataListSummaryDataBMS.batteryPackPower, 1) }}
                </text>
              </view>
              <view class="content-value">{{
                t("equipmentDetail.batteryPackPower")
              }}</view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="activeTab == 2 && dataListSummaryDataDCDC">
        <!-- 运行状态 -->
        <view class="operationalStatus">
          <image
            class="operationalStatus-img"
            src="/static/operationalStatus.png"
            mode=""
          />
          <view class="content-description">
            <view class="content-type">{{
              t("equipmentDetail.operationalStatus")
            }}</view>
            <view class="content-value">
              {{ dataListSummaryDataDCDC.workStatus }}
            </view>
          </view>
        </view>
        <!-- 运行item -->
        <view class="flex-list-content">
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/voltage.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataDCDC.highVoltSideCurr }}</text>
                <text class="unit">A</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.highSideCurrent") }}</view
              >
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/current.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataDCDC.highVoltSideVolt }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">{{
                t("equipmentDetail.highSideVoltage")
              }}</view>
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/totalSoc.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataDCDC.lowVoltSideCurr }}</text>
                <text class="unit">A</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.lowSideCurrent") }}</view
              >
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/batteryPower.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataDCDC.lowVoltSideVolt }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.lowSideVoltage") }}</view
              >
            </view>
          </view>
        </view>
      </template>
      <template v-if="activeTab == 3 && dataListSummaryDataMPPT">
        <!-- 运行状态 -->
        <view class="operationalStatus">
          <image
            class="operationalStatus-img"
            src="/static/operationalStatus.png"
            mode=""
          />
          <view class="content-description">
            <view class="content-type">{{
              t("equipmentDetail.operationalStatus")
            }}</view>
            <view class="content-value">
              {{ dataListSummaryDataMPPT.workStatus }}
            </view>
          </view>
        </view>
        <!-- 运行item -->
        <view class="flex-list-content">
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/voltage.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataMPPT.highVoltSideCurr }}</text>
                <text class="unit">A</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.highSideCurrent") }}</view
              >
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/current.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataMPPT.highVoltSideVolt }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">{{
                t("equipmentDetail.highSideVoltage")
              }}</view>
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/totalSoc.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataMPPT.lowVoltSideCurr }}</text>
                <text class="unit">A</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.lowSideCurrent") }}</view
              >
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/batteryPower.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataMPPT.lowVoltSideVolt }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.lowSideVoltage") }}</view
              >
            </view>
          </view>
        </view>
      </template>
      <template v-if="activeTab == 4 && dataListSummaryDataPCS">
        <!-- 运行状态 -->
        <view class="operationalStatus">
          <image
            class="operationalStatus-img"
            src="/static/operationalStatus.png"
            mode=""
          />
          <view class="content-description">
            <view class="content-type">{{
              t("equipmentDetail.operationalStatus")
            }}</view>
            <view class="content-value">
              {{ dataListSummaryDataPCS.workStatus }}
            </view>
          </view>
        </view>
        <!-- 运行item -->
        <view class="flex-list-content">
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/voltage.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataPCS.acaPhaseVoltage }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">{{
                t("equipmentDetail.acPhaseAVoltage")
              }}</view>
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/current.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataPCS.acbPhaseVoltage }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">{{
                t("equipmentDetail.acPhaseBVoltage")
              }}</view>
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/totalSoc.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>{{ dataListSummaryDataPCS.accPhaseVoltage }}</text>
                <text class="unit">V</text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.acCPhaseVoltage") }}
              </view>
            </view>
          </view>
          <view class="flex-item">
            <image
              class="operationalStatus-img"
              src="/static/batteryPower.png"
              mode=""
            />
            <view class="content-description">
              <view class="content-type">
                <text>
                  {{ powerUnit(dataListSummaryDataPCS.acActivePower, 0) }}
                </text>
                <text class="unit">
                  {{ powerUnit(dataListSummaryDataPCS.acActivePower, 1) }}
                </text>
              </view>
              <view class="content-value">
                {{ t("equipmentDetail.acActivePower") }}
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { powerUnit } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  tabList: {
    type: Array,
    default: [],
  },
  dataListSummaryDataBMS: {
    type: Object,
    default: {},
  },
  dataListSummaryDataDCDC: {
    type: Object,
    default: {},
  },
  dataListSummaryDataMPPT: {
    type: Object,
    default: {},
  },
  dataListSummaryDataPCS: {
    type: Object,
    default: {},
  },
});

// 创建响应式数据
const activeTab = ref(1);

const getTabListKey = () => {
  return activeTab.value;
};
const emit = defineEmits(["handleTableChnange", "goSiteDeviceDetails"]);
// 定义方法
const handleTab = (item) => {
  activeTab.value = item.code;
  emit("handleTableChnange");
};

const goSiteDeviceDetails = () => {
  emit("goSiteDeviceDetails", activeTab.value);
};

defineExpose({
  getTabListKey,
});
</script>

<style scoped lang="scss">
.equipment {
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
  margin-top: 30rpx;

  .equipment-content {
    background: #132034;
    border-radius: 15rpx;

    .tab-list {
      width: 100%;
      text-align: center;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 24rpx;
      box-sizing: border-box;
      border-radius: 15rpx;
      background: #132034;
    }
    .steer {
      width: 100%;
      text-align: right;
      padding: 0 20rpx;
      box-sizing: border-box;
      position: relative;
      bottom: -30rpx;
      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
    .operationalStatus {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0 24rpx;
      box-sizing: border-box;
      background: #132034;

      .operationalStatus-img {
        width: 111rpx;
        height: 120rpx;
        margin-right: 64rpx;
      }
      .content-description {
        .content-type {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          font-weight: normal;
          color: #bfbfbf;
          margin-bottom: 20rpx;
        }
        .content-value {
          font-family: Alibaba PuHuiTi 3;
          font-size: 40rpx;
          font-weight: 600;
          font-variation-settings: "opsz" auto;
          color: #ffffff;
        }
      }
    }
    .flex-list-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .flex-item {
        margin-top: 16rpx;
        width: 48%;
        background: #132034;
        border-radius: 15rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0 24rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        background: #132034;
        .operationalStatus-img {
          width: 111rpx;
          height: 120rpx;
          margin-right: 21rpx;
        }
        .content-description {
          width: calc(100% - 132rpx);
          .content-type {
            font-family: D-DIN;
            font-size: 44rpx;
            font-weight: bold;
            color: #ffffff;
            .unit {
              margin-left: 7rpx;
              font-size: 28rpx;
            }
          }
          .content-value {
            font-family: Alibaba PuHuiTi 3;
            font-size: 24rpx;
            font-weight: normal;
            font-variation-settings: "opsz" auto;
            color: #bfbfbf;
          }
        }
      }
    }
  }
}
</style>
